<template>
    <div class="footer">
        <div class="container">
            <div class="siteinfo">
                <ul class="c0">
                    <h3 class="c1">产品服务</h3>
                    <ul>
                        <li class="c2">
                            <router-link to="/bankruptcy"><a class="c3">破产清算</a></router-link>
                        </li>
                        <li class="c2">
                            <router-link to="/shares"><a class="c3">证券诉讼</a></router-link>
                        </li>
                        <li class="c2">
                            <router-link to="/road"><a class="c3">道交理赔</a></router-link>
                        </li>
                    </ul>
                </ul>
                <ul class="c0">
                    <h3 class="c1">合作伙伴</h3>
                    <ul>
                        <li class="c2">
                            <a class="c3" target="#" href="https://www.brop.cn/">洛谱区块链</a>
                        </li>
                        <li class="c2"><a class="c3" target="#" href="http://www.icbc.com.cn/icbc/">中国工商银行</a></li>
                        <li class="c2"><a class="c3" target="#" href="http://www.zhehang.com/">浙江浙杭律师事务所</a></li>
                        <li class="c2"><a class="c3" target="#" href="http://www.bmsoft.com.cn/">北明软件有限公司</a></li>
                    </ul>
                </ul>
                <ul class="c0">
                    <h3 class="c1">微信公众号(法汇数据)</h3>
                    <ul>
                        <li class="c2">
                            <img width="80" height="80" src="https://liquidation-1.oss-cn-hangzhou.aliyuncs.com/c1f16dc7f79ead1f64e518fd311ff5a2.jpg">
                            <br>
                        </li>
                    </ul>
                </ul>
                <ul class="c0">
                    <h3 class="c1">微信公众号(法壹刊)</h3>
                    <ul>
                        <li class="c2">
                            <img width="80" height="80" src="https://liquidation-1.oss-cn-hangzhou.aliyuncs.com/c7f74c97d5377945ebdc27a37011385a.jpg">
                            <br>
                        </li>
                    </ul>
                </ul>
                <ul class="c4">
                    <li class="tel">联系我们</li>
                    <li class="tel">15868198876</li>
                    <li class="tel">0571-89180115</li>
                    <li class="time">时间：周一至周日 9:00-23:00</li>
                    <li class="online">邮箱：fahuidata@163.com</li>
                </ul>

            </div>

            <div class="copyright">
                <h4 class="content-c2">Copyright ©2018 法汇数据-技术让法律更友好 . All Rights Reserved .</h4>
            </div>
            <div class="cop">
                <span class="content-c3">地址：浙江省杭州市余杭区仓前街道文一西路1380号4楼406室</span>
            </div>
        </div>
    </div>
</template>
<script>
    import YButton from '../../components/YButton'

    export default {
        data() {
            return {}
        },
        methods: {
            open1() {
                this.$notify.info({
                    title: '法律声明',
                    message: '此仅为个人练习开源模仿项目，仅供学习参考，承担不起任何法律问题'
                })
            },
            open2() {
                this.$notify.info({
                    title: '隐私条款',
                    message: '本网站将不会严格遵守有关法律法规和本隐私政策所载明的内容收集、使用您的信息'
                })
            },
            open3() {
                this.$notify({
                    title: '离线帮助',
                    message: '没人会帮助你，请自己靠自己',
                    type: 'warning'
                })
            },
            open4() {
                this.$notify.info({
                    title: '支付方式',
                    message: '支持支付宝、微信等方式捐赠'
                })
            },
            open5() {
                this.$notify({
                    title: '送货政策',
                    message: '本网站所有商品购买后不会发货，将用作捐赠',
                    type: 'warning'
                })
            }
        },
        components: {
            YButton
        }
    }
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
    .footer {
        padding: 20px 0 10px;
        border-top: 1px solid #e6e6e6;
        background: #121212;
        margin-top: 60px;
        height: 300px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .container {
        width: 1220px;
    }

    .siteinfo {
        height: 100px;
        padding: 50px 0 130px;
        border-bottom: 1px solid #e6e6e6;
        position: relative;
    }

    .c0 {
        width: 149px;
        line-height: 1;
        float: left;
    }

    .c1 {
        color: #646464;
        font-size: 12px;
        padding: 0 0 14px;
    }

    .c2 {
        color: #c3c3c3;
        font-size: 12px;
        padding: 6px 0;
    }

    .c3 {
        color: #969696;
    }

    .c4 {
        position: absolute;
        right: 0;
        overflow: hidden;
        line-height: 34px;
    }

    .tel {
        font-size: 20px;
        line-height: 1;
        color: #ffffff;
        top: -2px;
        text-align: right;
        position: relative;
    }

    .c5 {
        color: #646464;
        right: -70px;
        position: relative;
    }

    .time {
        margin-top: 5px;
        position: relative;
        clear: both;
        width: 241px;
        font-size: 12px;
        line-height: 18px;
        color: #c3c3c3;
        text-align: right;
    }

    .online {
        clear: both;
        width: 241px;
        font-size: 12px;
        line-height: 18px;
        color: #c3c3c3;
        text-align: right;
    }

    .button {
        width: 130px;
        height: 34px;
        font-size: 14px;
        color: #5079d9;
        border: 1px solid #dcdcdc;
        margin-top: 8px;
    }

    .copyright {
        color: #434d55;
        font-size: 12px;
        padding: 40px 0 0;
        display: flex;
        align-items: left;
    }

    .privacy {
        float: left;
        margin: 0 0 0 12px;
    }

    .content-c0 {
        color: #5079d9;
        cursor: pointer;
        text-decoration: none;

        &:hover {
            color: #3A5FCD;
        }
    }

    .content-c1 {
        float: left;
        line-height: 12px;
        padding: 1px 10px 0;
        border-left: 1px solid #ccc;
    }

    .content-c2 {
        float: left;
        height: 15px;
        line-height: 15px;
        color: #ffffff;
    }

    .cop {
        clear: both;
        padding: 10px 0 0;
        height: 15px;
    }

    .content-c3 {
        margin-right: 20px;
        color: #bdbdbd;
        font-size: 12px;
        height: 12px;
        line-height: 1;
    }
</style>
